//定制下拉菜单,挂到当前页面的data中去
const contextMenu = new G6.Menu({
  getContent(evt) {
    //获取到点击的对应节点,可根据此定制不同的内容
    console.log("evt: ", evt.item._cfg.model);
    if (evt.item._cfg.model.attr === "yes") {
      return "该节点不可探索";
    }
    return `
      <ul>
        <li>门店探索</li>    //节点的样式可通过insertCss来定制
        <li>相似产品发现</li> 
        <li>产品组合</li>
        <li>城市探索</li>
        <li>同类产品发现</li>
      </ul>
      `;
  },
  handleMenuClick: (target, item) => {
    console.log(target.innerText, item);
  },
  // offsetX and offsetY include the padding of the parent container
  // 需要加上父级容器的 padding-left 16 与自身偏移量 10
  offsetX: 16 + 10,
  // 需要加上父级容器的 padding-top 24 、画布兄弟元素高度、与自身偏移量 10
  offsetY: 0,
  // the types of items that allow the menu show up
  // 在哪些类型的元素上响应
  itemTypes: ["node"],
});

//通过画布的属性 plugins: [contextMenu],引入生成好的插件

//通过insertCss给插件写样式
import insertCss from "insert-css";
insertCss(`
.g6-component-contextmenu {
  position: absolute;
  list-style-type: none;
  padding: 5px 8px;
  left: -150px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  font-size: 12px;
  line-height:20px;
  color: #545454;
}
.g6-component-contextmenu li {
  cursor: pointer;
  list-style-type:none;
  list-style: none;
  margin-left: 0px;
}
.g6-component-contextmenu li:hover {
  color: #aaa;
}
`);